<!DOCTYPE HTML>
<html>


<link rel="stylesheet" href="../../bootstrap-3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="preview.css" />



<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<script src="viewer.js"></script>
<script src="preview.js"></script>


<body>

	<div id="mainContainer">
		<div id="previewContainer">
			<iframe id="preview" class="iframePreview" src="viewer.html"></iframe>
		</div>
		<div id="actions">
			<table class="table table-striped">
		      <thead>
		        <tr>
		          <th>Action</th>
		          <th>Description</th>
		        </tr>
		      </thead>
		      <tbody>
		        <tr>
		          <td><button id="highlight-btn" type="button" class="btn btn-default">Highlight a segment</button></td>
		          <td>HighLight Segment description</td>
		        </tr>


		        <tr>
		          <td><button id="setPreviewAsDirty-btn" type="button" class="btn btn-default">Set Preview as Dirty</button></td>
		          <td>Set Preview as Dirty</td>
		        </tr>

				<tr>
		          <td><button id="setPdf-btn" type="button" class="btn btn-default">Set pdf</button></td>
		          <td>Set a new PDF to be loaded into the preview</td>
		        </tr>


				<tr>
		          <td><button id="showMessageSuccess-btn" type="button" class="btn btn-default">Show Success Message</button></td>
		          <td>Showing a success message</td>
		        </tr>

		        <tr>
		          <td><button id="showMessageInfo-btn" type="button" class="btn btn-default">Show Info Message</button></td>
		          <td>Showing an info message</td>
		        </tr>

		        <tr>
		          <td><button id="showMessageWarning-btn" type="button" class="btn btn-default">Show Warning Message</button></td>
		          <td>Showing a warning message</td>
		        </tr>

		        <tr>
		          <td><button id="showMessageDanger-btn" type="button" class="btn btn-default">Show Danger Message</button></td>
		          <td>Showing a danger message</td>
		        </tr>


		      </tbody>
			</table>	
		</div>
	</div>

<script>

	$(document).ready(function() {
	    $("#highlight-btn").click(function(){
	        highLightSegment("0+1+1");
	    }); 
	});

	$(document).ready(function() {
	    $("#setPreviewAsDirty-btn").click(function(){
	        setPreviewAsDirty("This pdf is dirty");
	    }); 
	});


	$(document).ready(function() {
	    $("#setPdf-btn").click(function(){
	        setThePDFFile("file=file.pdf");
	    }); 
	});



	$(document).ready(function() {
	    $("#showMessageSuccess-btn").click(function(){
	        showMessage("Showing a success message", "success");
	    }); 
	});

	$(document).ready(function() {
	    $("#showMessageInfo-btn").click(function(){
	        showMessage("Showing an info message", "info");
	    }); 
	});

	$(document).ready(function() {
	    $("#showMessageWarning-btn").click(function(){
	        showMessage("Showing a warning message", "warning");
	    }); 
	});

	$(document).ready(function() {
	    $("#showMessageDanger-btn").click(function(){
	        showMessage("Showing a danger message", "danger");
	    }); 
	});

	


</script>

</body>
</html>